<template>
  <div class="review-bar">
    <div class="review-bar-chart">
      <VptXBar
        :chartData="list"
        autoRander
        :width="width"
        :yAxisData="yData"
        :legend="legend"
        v-bind="barProps"
        :bottom="bottom"
        :showLegend="false"
        :chartType="chartType"
      ></VptXBar>
    </div>
  </div>
</template>

<script setup>
import VptXBar from "./vpt-x-bar.vue";
import { fontSize } from "@/utils/rem/rem.js";
import { computed, onMounted, reactive } from "vue";

const props = defineProps({
  applicationData: { type: Array, default: () => [] },
  barData: { type: Array, default: () => [] },
  // 是否为横屏
  isLandscape: { type: Boolean, default: false },
  width: { type: String, default: "8.92rem" },
  height: { type: String, default: "2.88rem" },
  bottom: {
    type: Number,
    default: 80,
  },
  chartType: { type: String, default: "init" },
});

const list = computed(() => {
  return props.applicationData.length
    ? [props.applicationData.map((item) => item.num)]
    : [];
});

const legend = computed(() => {
  const modulesSet = new Set(props.barData.map((item) => item.type));
  return Array.from(modulesSet);
});

const yData = computed(() => {
  return props.applicationData.map((item) => item.name);
});

onMounted(() => {
})

const barProps = computed(() => {
  
  return {
    legend: {
      data: legend,
    },
  color: ["#2175DB"],
  dataZoom: {
    show: true,
    // endValue: 14,
    bottom: fontSize(props.bottom),
  },
  };
});

const getOtherBarProps = () => {
  return {
    grid: {
      left: fontSize(5),
      top: fontSize(40),
      bottom: fontSize(20),
    },
    titleFontSize: 14,
    xAxisLabelFontSize: 14,
    yAxisLabelFontSize: 14,
    barWidth: 20,
  };
};
</script>

<style lang="less" scoped>
.review-bar {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;


  .review-bar-chart {
    flex: 1;
    height: 0;
  }
}
</style>
